<template>
  <div class="data-item-panel">
    <div class="header">
      <div class="header_label">
        <span>数据项选择</span>
      </div>
      <el-input
        class="header_input"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
      >
      </el-input>
    </div>
    <div class="content">
      <draggable-tree v-model:nodes="nodes">
        <template #default="{ node }">
          <span class="custom-tree-node" @click="addSchema(node)">
            <span>{{ node.label }}</span>
          </span>
        </template>
      </draggable-tree>
      <base-empty v-if="!nodes.length" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { componentList, deepClone } from "../../uitls";
import { ref, watchEffect } from "vue";
import { DraggableTreeNode } from "../../type";
import { ElInput } from "element-plus";
import draggableTree from "./draggable-tree.vue";
import baseEmpty from "../base/base-empty.vue";
const nodes = ref<DraggableTreeNode[]>(componentList);
const filterText = ref("");
// ***********新增模块相关数据***********
const emit = defineEmits(["addSchema", "addDataItem"]);
watchEffect(() => {
  console.log(filterText.value);
  console.log("暂未开发");
});
function addSchema(node: DraggableTreeNode) {
  emit("addSchema", deepClone(node));
}
</script>

<style lang="scss" scoped>
@mixin color($color) {
  @if $color == "primary" {
    color: #409eff;
  } @else if $color == "danger" {
    color: #f56c6c;
  } @else {
    color: #606266;
  }
}
.data-item-panel {
  height: 100%;
  .header {
    height: 70px;
    &_label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-weight: bold;
      }
    }
  }
  .content {
    margin-top: 20px;
  }
}
.custom-tree-node {
  width: 100%;
  padding: 0 15px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn {
    display: none;
  }
  &:hover {
    .btn {
      display: flex;
      gap: 10px;
      @include color("primary");
      .delete {
        @include color("danger");
      }
    }
  }
}
.form_item {
  display: flex;
  align-items: center;
  span {
    width: 120px;
  }
  margin-bottom: 10px;
}
</style>
